<template>
  <view class="order_index">
    <view style="text-align: center; margin-top: 0.5rpx" v-if="consumeList.length == 0">您暂未此类型消费记录</view>
    <section class="center">
      <navigator :url="`../../subPack/record/_id?orderNo=${ele.orderNo}`" class="item" v-for="ele in consumeList" :key="ele.orderNo">
        <view class="order-top">
          <view class="cont">{{ (ele.payType == "wx" ? "微信" : "") + (ele.payType == "zfb" ? "支付宝" : "") + (ele.payType == "dzk" ? "电子卡" : "") }} - {{ ele.stationName }}</view>
          <text class="cont-success">{{ "交易成功" }}</text>
        </view>
        <view class="line"></view>
        <view class="order-bottom">
          <view class="time">加油日期：{{ ele.createdDate }}</view>
          <view class="right">
            <view class="right-amt">￥{{ ele.amt }}</view>
            <view class="right-coupon">优惠￥{{ ele.discountAmt + ele.discountCouponAmt }}</view>
          </view>
        </view>
      </navigator>
    </section>
    <footer class="bottom" v-if="total > consumeQuery.pageSize">
      <uni-pagination :total="total" :current="consumeQuery.pageNum" :pageSize="consumeQuery.pageSize" title="标题文字" @change="pageChange" />
    </footer>
    <van-popup :show="showPoup" bind:close="onClose">
      <view class="popup_model">
        <view>温馨提示</view>
        <view>为保证小程序的正常运行,请点击授权</view>
        <button id="phone" plain open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="phone_main">授权</button>
      </view>
    </van-popup>
  </view>
</template>

<script>
import { mapMutations } from "vuex";
import settings from "@/settings.js";
export default {
  data() {
    return {
      total: 0,
      actions: [
        {
          name: "全部",
          value: "",
        },
        {
          name: "92#",
          value: "92#",
        },
        {
          name: "0#",
          value: "0#",
        },
      ],
      show: false,
      selected: {
        name: "全部",
        value: "",
      },
      consumeQuery: {
        enterpriseId: undefined,
        mobilePhone: undefined,
        stationId: undefined,
        oilName: undefined,
        pageNum: "1",
        pageSize: "10",
      },
      consumeList: [],
      oilIndex: 0,
      userInfo: {},
      stationId: settings.stationId,
      showPoup: false,
    };
  },

  onLoad() {
    this.updateEnterpriseId(settings.enterpriseId);
  },
  onShow() {
    const this_ = this;
    if (this.phoneNumber) {
      this.showPoup = false;
      this.getChargeList();
      this.getUserInfo();
    } else {
      this.showPoup = true;
      this.getOpenId();
    }
    if (!this.userInfo) {
      wx.getUserInfo({
        success: function (res) {
          this_.gender = res.userInfo.gender;
        },
      });
    }
  },
  watch: {
    phoneNumber(newval, oldval) {
      if (this.phoneNumber) {
        this.getUserInfo();
      }
    },
    enterpriseId(newval, oldval) {
      // 康裕石化能源： 生产id是 137  测试id是194
      if (this.enterpriseId !== settings.stationId) {
        this.getOpenId();
      }
    },
  },
  methods: {
    ...mapMutations({
      updateOpenId: "updateOpenId",
      updatePhoneNumber: "updatePhoneNumber",
      updateEnterpriseId: "updateEnterpriseId",
    }),
    pageChange(e) {
      this.consumeQuery.pageNum = e.current;
      this.getChargeList();
    },
    bindPickerChange(e) {
      this.oilIndex = e.detail.value;
      this.getChargeList();
    },
    async getChargeList() {
      try {
        this.consumeQuery.oilName = this.actions[this.oilIndex].value;
        this.consumeQuery.enterpriseId = this.enterpriseId;
        this.consumeQuery.mobilePhone = this.phoneNumber;
        const amountData = await this.$Request({
          url: "/getUserOrderListByUnionId",
          method: "GET",
          data: this.consumeQuery,
        });
        if (amountData.retCode !== 0) {
          throw new Error(amountData.message);
        }
        console.log("amountData", amountData);

        this.consumeList = amountData.data.list;
        this.total = amountData.data.total;

        // this.chargeList = amountData.data;
      } catch (error) {
        console.log(error);
      }
    },
    async getUserInfo() {
      try {
        if (this.phoneNumber) {
          const infoData = await this.$Request({
            url: "/selectMemberInfo",
            method: "GET",
            data: {
              enterpriseId: this.enterpriseId,
              mobilePhone: this.phoneNumber,
            },
          });
          if (infoData.retCode !== 0) {
            throw new Error(infoData.message);
          }
          this.userInfo = infoData.data;
        }
      } catch (error) {}
    },
    // 获取手机号
    async getPhoneNumber(info) {
      uni.showLoading({
        title: "获取中...",
        mask: true,
      });
      if (info.detail.errMsg === "getPhoneNumber:ok") {
        this.showPoup = false;
        const encryptedData = info.detail.encryptedData;
        const iv = info.detail.iv;
        const infoData = await this.$Request({
          url: "/loginGetPhone",
          method: "GET",
          data: {
            code: this.code,
            stationId: this.stationId,
            encryptedData,
            iv,
            version: 2,
            blogNickName: "微信用户",
            sexFlag: this.gender || 0,
            blogProfilePhoto: this.avatarUrl,
          },
        });
        const openId = infoData.data.openId;
        this.updateOpenId(openId);
        const phone = infoData.data.phoneNumber;
        this.phoneNumber = infoData.data.phoneNumber;
        this.updatePhoneNumber(phone);
        this.getChargeList();
        uni.hideLoading();
      } else {
        uni.hideLoading();
        uni.showToast({
          title: "请授权登录~",
          icon: "error",
        });
        this.getOpenId();
      }
    },
    async getOpenId() {
      const this_ = this;
      uni.login({
        provider: "weixin",
        success: async (res) => {
          this_.code = res.code;
        },
      });
    },
  },
};
</script>

<style lang="scss">
.order_index {
  padding: 40rpx;
  padding-bottom: 0;
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: #f5f5f5;

  .top {
    background-color: #f8f8f8;
    overflow: hidden;
    padding: 20rpx 25rpx;
    display: flex;
    justify-content: space-between;
    text-align: center;
    font-size: 25rpx;

    .picker {
      display: flex;
      align-items: center;
      .icon {
        margin-top: 5rpx;
        margin-left: 10rpx;
        display: inline-block;
        width: 20rpx;
        height: 15rpx;
        background: url("../../subPack/static/icon/1_b01_down.2x.png") no-repeat 0 0;
        background-size: 100% 100%;
      }
    }
  }
  .center {
    display: flex;
    flex-direction: column;

    > .item {
      width: 100%;
      height: 210rpx;
      background-color: #fff;
      border-radius: 10rpx;
      padding: 30rpx 25rpx;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      margin-bottom: 20rpx;

      .order-top {
        display: flex;
        justify-content: space-between;
        .cont {
          color: #292929;
          font-size: 26rpx;
          font-weight: bold;
        }
        .cont-success {
          font-size: 26rpx;
        }
      }

      .line {
        width: 100%;
        height: 1px;
        background-color: #f5f5f5;
        margin: 14rpx 0;
      }

      .order-bottom {
        display: flex;
        justify-content: space-between;

        .time {
          color: #666;
          font-size: 24rpx;
        }
        .right {
          display: flex;
          flex-direction: column;
          .right-amt {
            font-size: 26rpx;
            text-align: right;
          }
          .right-coupon {
            margin-top: 10rpx;
            font-size: 26rpx;
            color: #f09006;
          }
        }
      }

      .add {
        color: #c5ac61;
      }
    }
  }

  .bottom {
    width: 100%;
  }
  .popup_model {
    width: 600rpx;
    padding: 20rpx;
    text-align: center;
    view:first-child {
      font-size: 36rpx;
      color: #000;
      font-weight: bold;
      padding-bottom: 45rpx;
    }
    button {
      margin: 50rpx 0 20rpx;
      background-color: #1bc332;
      padding: 20rpx 0;
      border-radius: 24rpx;
      color: #fff;
      font-size: 32rpx;
      line-height: unset;
      border: unset;
    }
  }
}
</style>
